import React from 'react'
import { Menu } from 'antd';
// import { MailOutlined} from '@ant-design/icons';
import routes from '../../pages/index'
import './index.scss'
import { NavLink } from 'react-router-dom'
const { SubMenu } = Menu;
export default class Home extends React.Component {
  state = {

  };
  handleClick = e => {
    console.log('click ', e);
    this.setState({
      current: e.key,
    });
  };
  getNav() {
    return routes.map(res => (
      <SubMenu key={res.id} title={res.text}>
        {res.children ? res.children.map(ele => (
          
            <Menu.Item key={ele.id}><NavLink to={ele.path}>{ele.text}</NavLink></Menu.Item>
         
        )) : ''}
      </SubMenu>
    ))
  }
  render() {
    return (
      <div className='Nav'>

        <Menu
          theme={this.state.theme}
          onClick={this.handleClick}
          style={{ width: 200 }}
          defaultOpenKeys={['']}
          selectedKeys={[this.state.current]}
          mode="inline"
        >
          {this.getNav()}
        </Menu>
      </div>
    )
  }
}


